import React from "react";
import Cel from "../../components/temperature/Celsius"
import Fah from "../../components/temperature/Fahrenheit"
import Box from "../../components/temperature/Box"

class Calculator extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      celsius: 0,
      fahrenheit: 0,
      ifshow: true,
      mycontext: 'myContext'
    }
    this.myRef = React.createRef()
    console.log(this.myRef);
  }

  byCelChange = (e) => {
    console.log(e);
    this.setState({
      celsius: e,
      fahrenheit: (e * 9 / 5) + 32
    })
  }

  byFahChange = (e) => {
    console.log(e);
    this.setState({
      celsius: (e - 32) * 5 / 9,
      fahrenheit: e
    })
  }

  showdiv = () => {
    if (this.state.ifshow) {
      return <div
        style={{
        width: '50px',
        height: '50px',
        backgroundColor: '#abcdef'
      }}></div>
    }
    return null
  }
  toToggle = () => {
    this.setState({
      ifshow: !this.state.ifshow
    })
  }

  render() {
    const props = {
      aaa: '123',
      bbb: '456'
    }
    return (
      <div>
        <Box>
          <Cel celsius={this.state.celsius} {...props} onCelChange={this.byCelChange}></Cel>
          <Fah fahrenheit={this.state.fahrenheit} onFahChange={this.byFahChange}></Fah>
        </Box>

        <button onClick={this.toToggle}>toggle</button>
        {this.showdiv()}
      </div>
    )
  }
}

export default Calculator